import React, { useState, useMemo } from 'react'
import { Anchor, Col, Row } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import '../App.css'
import { ProductCard, Tag, Button, SubmitBar, Checkbox, Badge } from 'react-vant';
import { ChatO } from '@react-vant/icons'
import Popups from '../conponents/Popup';


export default function Diandan() {

  let obj = useSelector(state => state.crms1)
  console.log(obj);

  let list = obj.typelist.map(item => {
    return {
      id: item.id, href: `#${item.id}`, title: item.title, key: item.id
    }
  })
  //console.log(list);

  //控制弹层的显示隐藏
  const [showCloseIcon, setShowCloseIcon] = useState(false)
  //数据
  const [itemobj, setItemobj] = useState({})

  //计算数量
  let totalNum = useMemo(() => {
    return obj.carlist.reduce((p, n) => {
      return p + n.num
    }, 0)
  }, [obj.carlist])

  //计算总价
  let totalPrice = useMemo(() => {
    return obj.carlist.reduce((p, n) => {
      return p + n.num * n.price
    }, 0)
  }, [obj.carlist])

  return (
    <div>
      {/* 锚点组件 */}
      <Row>
        <Col span={6}>
          <Anchor
            items={
              /* 左侧数据 */
              list
            }
          />
        </Col>
        <Col span={18}>
          {
            obj.typelist.map(item => {
              return <div key={item.id} id={item.id} style={{ height: '650px' }}>
                <h3>{item.title}</h3>
                {
                  obj.shoplist.filter(n => n.typeId == item.id).map(pro => {
                    return <div key={pro.id}>
                      <ProductCard
                        price={pro.price}
                        desc={pro.jianjie}
                        title={pro.title}
                        thumb={pro.img}
                        num={
                          <Badge content={pro.num > 0 ? pro.num : null} color="orange">

                            <Button type='warning' round size='mini' onClick={() => {
                              //点击显示弹层
                              setShowCloseIcon(true)
                              //数据
                              setItemobj(pro)
                            }}>选规格</Button>

                          </Badge>
                        }
                      />
                    </div>
                  })
                }
              </div>
            })
          }
        </Col>
      </Row>
      {/* 弹窗组件 */}
      <Popups itemobj={itemobj} showCloseIcon={showCloseIcon} setShowCloseIcon={setShowCloseIcon}></Popups>

      {/* 购物车价格和数量 */}
      {
        obj.carlist.length > 0 ?
          <div style={{ bottom: '20px' }} >
            <SubmitBar
              price={totalPrice * 100}
              buttonText="提交订单"
            >
              <div>
                <Badge content={totalNum}>
                  <ChatO />
                </Badge>
              </div>
            </SubmitBar>
          </div> : null
      }
    </div>
  )
}
